<template>
  <!-- <div @click="trans">start</div> -->
  <div class="contextmenu">
    <table>
      <thead>
        <tr>
          <th>框架名称</th>
          <th>使用人数</th>
          <th>占比</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) in list" :key="item.name" @contextmenu.prevent="openMenu($event, i)">
          <td>{{ item.name }}</td>
          <td>{{ item.num }}</td>
          <td>{{ item.percent }}</td>
        </tr>
      </tbody>
    </table>

    <ul
      class="menu"
      :style="{'left': x + 'px', 'top': y + 'px'}"
      v-show="show"
    >
      <li @click="del">删除</li>
      <li v-if="currentIndex > 0" @click="setTop">置顶</li>
    </ul>


  </div>
</template>

<script>
import list from './data.js';
export default {
  data() {
    return {
      list,
      x: 0,  // 右键菜单的位置
      y: 0,
      currentIndex: -1,
      show: false,
    };
  },
  methods: {
    openMenu(event, index) {  //
        this.x = event.clientX;
        this.y = event.clientY;
        this.show = true;
        this.currentIndex = index;
    },
    del() { // 删除
      this.list.splice(this.currentIndex, 1);
      this.show = false;
    },
    setTop() {  // 置顶
      const [item] = this.list.splice(this.currentIndex, 1);
      console.log(item);
      this.list.unshift(item);
      this.show = false;
    },
    trans() {
      let obj = {
        React: 63,
        Vue: 50,
        "No Framework": 27,
        "Angular 2": 14,
        Angular: 14,
        Backbone: 6,
        Polymer: 3,
        Ember: 2,
      };
      console.log(obj);

      const total = Object.values(obj).reduce((a, b) => a + b);
      console.log(total)

      Object.entries(obj).map(i => ({
        name: i[0],
        num: i[1],
        percent: Number(i[1] * 100 / total).toFixed(2) + '%'
      })).sort((a, b) => b.num - a.num)

    },
  },
};

// copy()  chrome 提供  $
</script>

<style >
    .contextmenu table {
      width: 100%;
      border-collapse: collapse;
    }
    .contextmenu th, .contextmenu td {
      border: 1px solid #ccc;
      padding: 5px;
    }
    .contextmenu tbody tr:hover td{
        background: #ddd;
    }
    .contextmenu .menu {
      position: fixed;
      border: 1px solid #eee;
      background: #fff;
      box-shadow: 0 0 5px 0 #ccc;
    }
    .contextmenu .menu li {
      line-height: 30px;
      text-align: center;
      transition: .6s;
      padding: 0 30px;
      cursor: pointer;
    }
    .contextmenu .menu li:hover {
      background: #eee;
    }
    .contextmenu .menu li + li {
        border-top: 1px solid #eee;
    }
</style>
